<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/localHttp.cjs.js"></script>
  </head>
  <body>
    <button id="previous">上一页</button>
    <button id="next">下一页</button>
    <div id="app"></div>
    <script>
      window.onload = function(){
        var list = [],app = document.querySelector("#app");
        var option = {pageNo:1,pageSize:6,total:5};
        var getList = function(){
          localHttp({
            url:'/projectList',
            data:option
          }).then((res)=>{
            var htmlstr = '';
            option.total = res.data.total;
            list = res.data.list;
            list.forEach((item)=>{
              htmlstr+= `<p>${item.prdName}</p>`;
            });
            app.innerHTML = htmlstr; 
          })
        }
        document.querySelector("#previous").addEventListener('click',function(){
          option.pageNo--;
          option.pageNo = option.pageNo || 1;
          getList();
        })
        document.querySelector("#next").addEventListener('click',function(){
          if(option.pageNo*option.pageSize >= option.total)return;
          option.pageNo++;
          getList();
        })
        getList();
      }
    </script>
  </body>
</html>
